<template>
	<view class="container">
		<view class="container-top">

			<view class="box">
			</view>
			<view class="text">正在骑行中</view>
		</view>
		<view class="container-bottom">
			<uv-grid :col="2">
				<uv-grid-item v-for="(item,index) in baseList" :key="index">
					<uv-icon :customStyle="{padding:20+'rpx',marginLeft:20+'rpx',marginRight:120+'rpx'}" :name="item.name" :size="32"></uv-icon>
					<text class="grid-text" style="white-space: nowrap;">{{item.title}}</text>
				</uv-grid-item>
			</uv-grid>
			
		</view>
		<view class="set-menu">
			<view class="set-menu-c1">
				<view>
					<button class="button-lock" @click="lockBike()">临时锁车</button>
				</view>
				<view>
					<button class="button-logout" @click="returnBike()">归还车辆</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseList: [{
					name: 'tags',
					title: '电动车编号：'
				}, {
					name: 'info-circle',
					title: '电池编号：'
				}, {
					name: 'empty-address',
					title: '已骑行距离：'
				}, {
					name: 'empty-search',
					title: '已骑行时间：'
				}]
			}
		},
		methods: {
		}
	}
</script>

<style>
	.container {

		justify-content: center;
		align-items: center;
		overflow: auto;
		height: 100vh;
		display: flex;
		flex-direction: column;
		background: linear-gradient(to bottom right, #55AAFF, #76FAC7);
	}

	.container-top,
	.container-bottom {
		width: 100%;
		display: flex;
		flex: 1;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}


	.box {
		/* border: 10px solid #ffaaff; */
		border-left: 10px solid #55aaff;
		border-right: 10px solid #76FAC7;
		border-radius: 50%;
		width: 200px;
		height: 200px;
		position: relative;
		animation: turn 5s linear infinite;
		transform-origin: 50% 50%;
	}

	.text {
		position: absolute;
		
		font-size: 20px;
		color: #ffffff;
	}

	@keyframes turn {
		100% {
			transform: rotateZ(-1turn);
		}
	}

	/* 宫格样式 */
	.grid-text {
		font-size: 14px;
		color: #909399;
	}
	
	/* 直接从个人中心复制 */
	.set-menu {
		flex: 1;
		display: flex;
	}
	
	.set-menu-c1{
		display: flex;
		flex-direction: row;
	}
	
	.button-lock {
		/* background: linear-gradient(to top left, #55AAFF, #76FAC7); */
		border: 5px solid transparent;
		border-radius: 16px;
		background-clip: padding-box, border-box;
		background-origin: padding-box, border-box;
		background-image: linear-gradient(to left, #55AAFF, #76FAC7), linear-gradient(to top left, #55AAFF, #76FAC7);
		background-size: 200%;
		color: white;
		border-radius: 10px;
		padding: 10px 20px;
		cursor: pointer;
		transition: background .3s;
	}
	
	
	.button-lock:hover {
		background-image: linear-gradient(to right, #F780A7, #76FAC7), linear-gradient(to top left, #55AAFF, #76FAC7);
		background-position: 100% 0;
	}
	
	.button-logout{
		margin-left: 20px;
		border: 5px solid transparent;
		border-radius: 16px;
		background-clip: padding-box, border-box;
		background-origin: padding-box, border-box;
		background-image: linear-gradient(to left, #ff007f, #dc0064), linear-gradient(to top left,  #dc0064,#ffffff);
		background-size: 200%;
		color: white;
		border-radius: 10px;
		padding: 10px 20px;
		cursor: pointer;
		transition: background .3s;
	}
	.button-logout:hover {
		background-image: linear-gradient(to right, #ff007f, #B9004A), linear-gradient(to top left, #F780A7, #B9004A);
		background-position: 100% 0;
	}
</style>